<template>
  <div class="container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"
             class="search">
      <el-form-item label="作物种类" prop="cropSpecie">
        <el-select v-model="queryParams.cropSpecie" placeholder="请选择作物种类" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(
              DICT_TYPE.PRODUCE_INFO_CROP_SPECIE
            )" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="作物品种" prop="cropVarieties">
        <el-input v-model="queryParams.cropVarieties" placeholder="请输入作物品种" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="地块编码" prop="landCode">
        <el-input v-model="queryParams.landCode" placeholder="请输入地块编码" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="种植面积" prop="plantArea">
        <el-input v-model="queryParams.plantArea" placeholder="请输入种植面积" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="种子名称" prop="seedName">
        <el-input v-model="queryParams.seedName" placeholder="请输入种子名称" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="使用量" prop="usage">
        <el-input v-model="queryParams.usage" placeholder="请输入使用量（袋）" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="种植标准" prop="plantStandards">
        <el-select v-model="queryParams.plantStandards" placeholder="请选择种植标准" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PLANTING_STANDARD_TYPE)" :key="dict.value"
                     :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="种植环境" prop="plantEnvironment">
        <el-select v-model="queryParams.plantEnvironment" placeholder="请选择种植环境" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(
              DICT_TYPE.PLANTING_ENVIRONMENT_TYPE
            )" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="种植时间" prop="plantTime">
        <el-date-picker v-model="queryParams.plantTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"/>
      </el-form-item>
      <el-form-item label="采收时间" prop="harvestTime">
        <el-date-picker v-model="queryParams.harvestTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"/>
      </el-form-item>
      <el-form-item label="定植时间" prop="colonizationTime">
        <el-date-picker v-model="queryParams.colonizationTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"/>
      </el-form-item>
      <el-form-item label="种植状态" prop="plantStatus">
        <el-select v-model="queryParams.plantStatus" placeholder="请选择种植状态" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PLANTING_STATUS)" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="card-panel">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                     v-hasPermi="['produce:info:create']">新增
          </el-button>
        </el-col>
        <!--        <el-col :span="1.5">-->
        <!--          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"-->
        <!--            :loading="exportLoading" v-hasPermi="['produce:info:export']">导出-->
        <!--          </el-button>-->
        <!--        </el-col>-->
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <!-- 列表 -->
      <el-row :gutter="30">
        <el-col :span="6" v-for="(item, index) in list" :key="index">
          <div class="card-panel-list">
            <div class="card-panel-top">
              <div class="card-panel-title">基本信息</div>
              <el-divider/>
              <el-descriptions :column="4" direction="vertical"
                               :label-style="{ color: '#999999', 'text-align': 'center' }"
                               :content-style="{ 'text-align': 'center' }"
                               :colon="false">
                <el-descriptions-item label="作物种类">
                  <dict-tag :type="DICT_TYPE.PRODUCE_INFO_CROP_SPECIE" :value="item.cropSpecie"/>
                </el-descriptions-item>
                <el-descriptions-item label="作物品种">{{ item.cropVarieties }}
                </el-descriptions-item>
                <el-descriptions-item label="定植日期">{{
                    item.colonizationTime == null ? '' :
                      formatDate(new Date(item.colonizationTime), 'yyyy-MM-dd')
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="种植面积">{{ item.plantArea ? item.plantArea + '亩' : '' }}
                </el-descriptions-item>
              </el-descriptions>
              <div class="growth-day">
                <p>生长天数</p>
                <p>
                  {{
                    item.plantTime == null
                      ? '--'
                      : formatDate(new Date(item.plantTime), 'yyyy-MM-dd') +
                      '~' +
                      formatDate(new Date(item.harvestTime), 'yyyy-MM-dd')
                  }}
                </p>
                <el-progress :percentage="computeGrowDays(index, 1)" :stroke-width="10"/>
                <p>{{ '已生长' + computeGrowDays(index, 2) + '天' }}</p>
              </div>
            </div>
            <div class="card-panel-bottom">
              <el-button size="mini" type="text" @click="handleDetail(item)" v-hasPermi="['pests:library:query']"><img
                src="@/assets/images/edit.png"/>详情
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)"
                         v-hasPermi="['produce:husbandry:update']">
                修改
              </el-button>
              <el-button size="mini" type="text" @click="executeHusbandry(item)"
                         v-hasPermi="['produce:husbandry:update']"><img src="@/assets/images/plus.png"/>添加农事计划
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)"
                         v-hasPermi="['produce:husbandry:delete']">删除
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList" :layout="'total, prev, pager, next, jumper'" class="pagination"/>
    </div>
    <!-- 操作工具栏 -->

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="1300px" v-dialogDrag append-to-body class="addDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="作物种类" prop="cropSpecie">
          <el-select v-model="form.cropSpecie" placeholder="请选择作物种类">
            <el-option v-for="dict in this.getDictDatas(
                DICT_TYPE.PRODUCE_INFO_CROP_SPECIE
              )" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
          </el-select>
        </el-form-item>
        <el-form-item label="地块" prop="landCode">
          <template>
            <el-button type="primary" @click="onloadLandOptions">选择</el-button>
            <el-input v-model="selectLandNames" style="width: 204px ;margin-left: 40px" placeholder="请选择地块"/>
          </template>
        </el-form-item>
        <!--        <el-form-item label="添加地块" prop="username">
                  <el-button type="primary">添加</el-button>
                </el-form-item>-->
        <el-dialog title="农户列表" :visible.sync="openSelectLand" width="800px" append-to-body
                   :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
          <el-form :model="queryLandParams" ref="queryLandForm" size="small" :inline="true" v-show="showSearch"
                   label-width="68px">
            <el-form-item label="种植物名" prop="plantingName">
              <el-input v-model="queryLandParams.plantingName" placeholder="请输入种植物名称" clearable
                        @keyup.enter.native="handleLandListQuery"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleLandListQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetLandListQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 列表 -->
          <el-table ref="landTable" v-loading="landLoading" :data="landList" @selection-change="selectOptionChanges"
                    tooltip-effect="dark">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="土地编码" align="center" prop="landCode"/>
            <el-table-column label="种植物名" align="center" prop="plantingName"/>
            <el-table-column label="种植周期（月）" align="center" prop="plantingCycle"/>
          </el-table>
          <!-- 分页组件 -->
          <pagination v-show="landTotal > 0" :total="landTotal" :page.sync="queryLandParams.pageNo"
                      :limit.sync="queryLandParams.pageSize" @pagination="onloadLandOptions"/>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureSelectLand">确 定</el-button>
            <el-button @click="cancelOptions">取 消</el-button>
          </div>
        </el-dialog>

        <el-form-item label="作物品种" prop="cropVarieties">
          <el-input v-model="form.cropVarieties" placeholder="请输入作物品种"/>
        </el-form-item>
        <el-form-item label="地块编码" prop="landCode">
          <el-input v-model="form.landCode" placeholder="请输入地块编码"/>
        </el-form-item>
        <el-form-item label="种植面积" prop="plantArea">
          <el-input v-model="form.plantArea" placeholder="请输入种植面积"/>
        </el-form-item>
        <el-form-item label="种子名称" prop="seedName">
          <el-input v-model="form.seedName" placeholder="请输入种子名称"/>
        </el-form-item>
        <el-form-item label="使用量（袋）" prop="usage">
          <el-input v-model="form.usage" placeholder="请输入使用量（袋）"/>
        </el-form-item>
        <el-form-item label="种植时间" prop="plantTime">
          <el-date-picker clearable v-model="form.plantTime" type="date" value-format="timestamp"
                          placeholder="选择种植时间"/>
        </el-form-item>
        <el-form-item label="生产模型" prop="growthId">
          <el-cascader :options="growthOptions" v-model="growthIds" :props="{ expandTrigger: 'hover' }"
                       placeholder="请选择生产模型" @change="handleOption" style="width: 250px">
          </el-cascader>
        </el-form-item>
        <el-form-item label="种植标准" prop="plantStandards">
          <el-select v-model="form.plantStandards" placeholder="请选择种植标准">
            <el-option v-for="dict in this.getDictDatas(
                DICT_TYPE.PLANTING_STANDARD_TYPE
              )" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
          </el-select>
        </el-form-item>
        <el-form-item label="种植环境" prop="plantEnvironment">
          <el-select v-model="form.plantEnvironment" placeholder="请选择种植环境">
            <el-option v-for="dict in this.getDictDatas(
                DICT_TYPE.PLANTING_ENVIRONMENT_TYPE
              )" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
          </el-select>
        </el-form-item>
        <el-form-item label="采收时间" prop="harvestTime">
          <el-date-picker clearable v-model="form.harvestTime" type="date" placeholder="选择采收时间"/>
        </el-form-item>
        <el-form-item label="定植时间" prop="colonizationTime">
          <el-date-picker clearable v-model="form.colonizationTime" type="date" value-format="timestamp"
                          placeholder="选择定植时间"/>
        </el-form-item>
        <el-form-item label="种植状态" prop="plantStatus">
          <el-select v-model="form.plantStatus" placeholder="请选择种植状态">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PLANTING_STATUS)" :key="dict.value"
                       :label="dict.label" :value="parseInt(dict.value)"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="基本信息详情" :visible.sync="infoVisible" width="1600px">
      <infoDetails v-if='infoVisible' :close-on-click-modal="false" @close="infoVisible=false" :row='row'></infoDetails>
    </el-dialog>
  </div>
</template>
<script>
import {createInfo, deleteInfo, exportInfoExcel, getInfo, getInfoPage, updateInfo} from '@/api/produce/info'
import {listAllColumn} from '@/api/system/growth/type'
import {getPlantingInformationPage} from '@/api/farmer/plantingInformation'
import infoDetails from './details.vue'

export default {
  name: 'Info',
  components: {
    infoDetails
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产管理基础信息列表
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      queryLandParams: {
        pageNo: 1,
        pageSize: 10,
        plantingName: null,
        plantingTime: [],
        plantingCycle: null,
        agroProductType: null,
        createTime: []
      },
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 12,
        cropSpecie: null,
        cropVarieties: null,
        landCode: null,
        plantArea: null,
        seedName: null,
        usage: null,
        growthId: null,
        plantStandards: null,
        plantEnvironment: null,
        plantTime: [],
        harvestTime: [],
        colonizationTime: [],
        plantStatus: null,
        createTime: []
      },
      // 表单参数
      form: {
        harvestTime: null,
        landCode: ''
      },
      // 表单校验
      rules: {},
      growthOptions: [],
      growthIds: null,
      growthDataList: [],
      detailVisible: false,
      row: {},
      selectLandList: [],
      selectLandNames: '',
      landList: [],
      openSelectLand: false,
      landTotal: 0,
      landLoading: true,
      selectLandCodes: [],
      infoVisible: false

    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    async getList() {
      this.loading = true
      // 执行查询
      await getInfoPage(this.queryParams).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
      await listAllColumn().then((resp) => {
        this.growthOptions = this.covertGrowth(resp.data)
        resp.data.forEach((data) => {
          if (
            data.growthModuleListDOS != null &&
            data.growthModuleListDOS.length > 0
          ) {
            this.growthDataList.push(...data.growthModuleListDOS)
          }
        })
      })

    },
    formatDate(date, format) {
      if (date != null) {
        let time = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          'S+': date.getMilliseconds()
        }
        if (/(y+)/i.test(format)) {
          format = format.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        }
        for (let k in time) {
          if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? time[k]
                : ('00' + time[k]).substr(('' + time[k]).length)
            )
          }
        }
        return format
      }
    },
    computeDay(sDate1, sDate2) {
      let dateSpan, tempDate, iDays
      sDate1 = Date.parse(sDate1)
      sDate2 = Date.parse(sDate2)
      dateSpan = sDate2 - sDate1
      dateSpan = Math.abs(dateSpan)
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
      return iDays
    },
    computeGrowDays(index, flag) {
      let plantTime = this.list[index].plantTime
      let harvestTime = this.list[index].harvestTime
      if (harvestTime != null && plantTime != null) {
        if (this.formatDate(new Date(Date.now()), 'yyyy-MM-dd') >=
          this.formatDate(new Date(harvestTime), 'yyyy-MM-dd')) {
          if (flag === 1) {
            return 100
          } else {
            return this.computeDay(new Date(harvestTime), new Date(plantTime))
          }
        } else {
          if (flag === 1) {
            return (
              Math.round(
                (this.computeDay(new Date(Date.now()), new Date(plantTime))) /
                this.computeDay(new Date(harvestTime), new Date(plantTime)) *
                10000
              ) / 100.0
            )
          } else {
            return this.computeDay(new Date(Date.now()), new Date(plantTime))
          }
        }
      } else {
        return 0
      }
    },
    covertGrowth(child) {
      return child.map(({ id, name, growthModuleListDOS }) =>
        growthModuleListDOS
          ? {
            value: '' + id,
            label: name,
            children: growthModuleListDOS.map((data) => {
              return { value: '' + data.id, label: data.label }
            })
          }
          : { value: '' + id, label: name }
      )
    },
    handleOption(select) {
      let growth = this.growthDataList.filter(
        (growth) => growth.id === parseInt(select[select.length - 1])
      )[0]
      this.form.plantStandards = growth.plantingStandardType
      this.form.plantEnvironment = growth.plantingEnvironmentType
      if (
        growth.growthModuleDataDOS != null &&
        growth.growthModuleDataDOS.length > 0
      ) {
        let time = new Date(this.form.plantTime)
        let day = time.getDate()
        growth.growthModuleDataDOS.forEach((data) => {
          day += parseInt(data.times)
        })
        time.setDate(day)
        this.form.harvestTime = this.formatDate(time, 'yyyy-MM-dd')
      } else {
        this.form.harvestTime = null
      }
    },
    selectOptionChanges(row) {
      this.selectLandList = row
    },
    onloadLandOptions() {
      this.openSelectLand = true
      this.landLoading = true
      getPlantingInformationPage({ ...this.queryLandParams }).then((response) => {
        this.landList = response.data.list
        this.landTotal = response.data.total
        this.landLoading = false
        this.$nextTick(() => {
          this.selectLandCodes.forEach(code => {
            if (code !== '' && code !== null) {
              this.$refs.landTable.toggleRowSelection(
                this.landList.find((land) => {
                  if (this.selectLandList.length <= 0) {
                    this.selectLandList.push(land.landCode === code)
                  }
                  return land.landCode === code
                }),
                true)
            }
          })
        })
      })
    },
    sureSelectLand() {
      this.selectLandNames = ''
      this.form.landCode = ''
      this.selectLandCodes = []
      this.form.plantArea = 0
      this.selectLandList.forEach(k => {
        this.selectLandNames += ',' + k.plantingName
        this.form.landCode += ',' + k.landCode
        this.form.plantArea += k.landArea
        this.selectLandCodes.push(k.landCode)
      })
      this.selectLandNames = this.selectLandNames.substring(1)
      this.form.landCode = this.form.landCode.substring(1)
      this.openSelectLand = false
    },
    cancelOptions() {
      this.$refs.landTable.clearSelection()
      this.openSelectLand = false
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        cropSpecie: undefined,
        cropVarieties: undefined,
        landCode: undefined,
        plantArea: undefined,
        seedName: undefined,
        usage: undefined,
        growthId: undefined,
        plantStandards: undefined,
        plantEnvironment: undefined,
        plantTime: undefined,
        harvestTime: undefined,
        colonizationTime: undefined,
        plantStatus: undefined
      }
      this.selectLandCodes = []
      this.selectLandNames = ''
      this.growthIds = null
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    handleLandListQuery() {
      this.queryLandParams.pageNo = 1
      this.onloadLandOptions()
    },
    resetLandListQuery() {
      this.resetForm('queryLandForm')
      this.handleLandListQuery()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加生产管理基础信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id
      getInfo(id).then((response) => {
        this.form = response.data
        if (this.form.landCode != null) {
          this.selectLandCodes = this.form.landCode.split(',')
        }
        this.growthIds = this.form.growthId + ''
        getPlantingInformationPage({}).then((resp) => {
          this.selectLandCodes.forEach((code) => {
            if (code !== '' && code !== null) {
              this.selectLandNames += ',' + resp.data.list.find((land) => {
                return land.landCode === code
              }).plantingName
              this.selectLandNames = this.selectLandNames.substring(1)
            }
          })
        })
        this.open = true
        this.title = '修改生产管理基础信息'
      })
    },
    executeHusbandry(row) {
      this.$router.push({
        path: '/produce/info/edit',
        query: { type: 'edit', id: row.id }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.growthIds != null) {
          this.form.growthId = this.growthIds[this.growthIds.length - 1]
        }
        this.form.harvestTime = new Date(this.form.harvestTime).getTime()
        // 修改的提交
        if (this.form.id != null) {
          updateInfo(this.form).then((response) => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
          return
        }
        // 添加的提交
        createInfo(this.form).then((response) => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.getList()
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id
      this.$modal
        .confirm('是否确认删除生产管理基础信息编号为"' + id + '"的数据项?')
        .then(function() {
          return deleteInfo(id)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams }
      params.pageNo = undefined
      params.pageSize = undefined
      this.$modal
        .confirm('是否确认导出所有生产管理基础信息数据项?')
        .then(() => {
          this.exportLoading = true
          return exportInfoExcel(params)
        })
        .then((response) => {
          this.$download.excel(response, '生产管理基础信息.xls')
          this.exportLoading = false
        })
        .catch(() => {
        })
    },
    //详情
    handleDetail(row) {
      this.row = row
      this.infoVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 24px;
  background-color: rgb(240, 242, 245);

  .search {
    padding: 32px 0;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 24px;
  }

  .card-panel {
    min-height: 965px;

    .card-panel-list {
      margin: 15px 0;
      height: 360px;
      background: #fff;
      box-shadow: 0px 3px 6px 1px rgba(67, 98, 255, 0.2);
      border-radius: 10px;
      position: relative;

      .card-panel-top {
        padding: 20px;

        .card-panel-title {
          border-left: 5px solid #4362ff;
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
        }

        .growth-day {
          p {
            color: #999999;
            font-size: 8px;
          }

          p:first-child {
            color: #333333;
            font-size: 16px;
          }

          ::v-deep .el-progress-bar__inner {
            background-image: linear-gradient(
                95deg,
                #35b2fc 0%,
                #a436d3 52%,
                #f97d29 100%
            );
          }

          ::v-deep .el-progress-bar {
            width: 96%;
          }
        }
      }

      .card-panel-bottom {
        padding: 20px 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #f5f8ff;
        border-radius: 0 0 10px 10px;

        .el-button--text {
          color: #4362ff;
          font-size: 16px;
        }

        img {
          height: 14px;
          width: 14px;
          margin-right: 5px;
        }
      }
    }
  }

  .pagination {
    margin: 30px auto;
    width: 500px;
    background: rgb(240, 242, 245);
  }
}
</style>
